<template>
	<view class="pageMe">
		<view class="head">
			<text class="introA">Profile</text>
			<text id="loginOut" @click="loginOut">退出登录</text>
			<view class="avabg" v-if="!isShow">
				<view class="avatar">
					<image src="../../static/unloginava.png" id="ava"></image>
					<view color="red" id="aline"></view>
					<view color="red" id="alineA" ></view>
				</view>
				
				<view class="personinfo">
					<view class="loginA" @tap="getUserProfile">
						登录
					</view>
				</view>
			</view>
			<view class="avabg" v-if="isShow">
				
				<view class="avatar">
					<!--:src="userInfo.avatarUrl"-->
					<image id="ava" :src="userInfo.avatarUrl"></image>
					<view color="red" id="aline"></view>
				</view>
				
				<view class="personinfo">
					<text id="name">{{userInfo.nickName}}</text>
					<br/>
					<text id="email">11111heel@qq.com</text>
					<br/>
				</view>
				
			</view>
			
			
			<view class="bodyA">
				<view class="setting">
					<text class="setfont">SettIng</text>
					
					<view class="settdetail" 
					@click="gomycommodity">
						<view class="iconset">
							
						</view>
						<view class="settinginfo">
							我的商品
						</view>
					</view>
					
					<view class="settdetail"
					@click="goorderlist">
						<view class="iconset">
							
						</view>
						<view class="settinginfo">
							我的订单
						</view>
					</view>
					
					<view class="settdetail"
					@click="gopersondata">
						<view class="iconset">
							
						</view>
						<view class="settinginfo">
							个人资料
						</view>
					
					</view>
					
					<view class="settdetail"
					@click="goaddressdata">
						<view class="iconset">
							
						</view>
						<view class="settinginfo">
							收货地址
						</view>
					
					</view>
					
					<view class="settdetail"
					@click="feedback">
						<view class="iconset">
							
						</view>
						<view class="settinginfo">
							反馈
						</view>
					
					</view>
					
				</view>
				
			</view>
			</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:'',
				isShow:false,
				showa:false,
				list:[
					{
						namea:'A',
						uptime:'设置',
						ontime:'5h'
					},
				],
				openId:''
			}
		},
		onLoad(){//设置登陆缓存，保持原有登录状态
			var user=uni.getStorageSync('user');
			if(user!=null){
				this.userInfo=user.userInfo;
				this.openId=user.openId;
				this.isShow=true;
			}
		},
		mounted(){
			getApp().globalData.openId=this.openId;
		},
		methods: {
			gomycommodity(){
				uni.navigateTo({
					url:"./mycommidoty"
				})
			},
			feedback(){
				uni.navigateTo({
					url:"./feedback"
				})
			},
			goorderlist(){
				uni.navigateTo({
					url:"./orderlist"
				})
			},
			gopersondata(){
				var that = this;
				uni.navigateTo({
					url:"./persondata?userInfo="+encodeURIComponent(JSON.stringify(that.userInfo))
				})
			},
			goaddressdata(){
				var that = this;
				uni.navigateTo({
					url:"./addressdata?userInfo="+encodeURIComponent(JSON.stringify(that.userInfo))
				})
			},
			getUserProfile(e){
				var that=this;//注意：this指向问题
				wx.getUserProfile(
				{
					lang:'zh_CN',
					desc:'用于获取个人信息',//介绍
					success:res=>{
						let user={
							userInfo:'',
							openId:''
						};
						user.userInfo=res.userInfo;
						that.userInfo=res.userInfo;
						that.isShow=true;
					
						console.log('Info',that.userInfo,that.isShow);
						uni.login(
						{
	
							provider:'weixin',
							success:function(loginRes){
								//loginRes.authResult不起作用（why)
								let Js_Code=loginRes.code
								console.log("loginRes",Js_Code)
								uni.request({
									url:'https://api.weixin.qq.com/sns/jscode2session?appid=wx81ba8d0a9b75d865&secret=303259a3d8bb5827d1860bdac3aecd7c&js_code='+Js_Code+"&grant_type=authorization_code",
									method:"POST",
									success:(res)=>{
										user.openId=res.data.openid;
										uni.setStorageSync('user',user);
										console.log("user",user)
										console.log("openid:"+res.data.openid)
										//console.log("nickName:"+that.userInfo.nickName)
										
										let data = {
											openId:res.data.openid,
											userName:that.userInfo.nickName,
											headImg:that.userInfo.avatarUrl
										}
										that.$axios(
											{
												method:'POST',
												url:'/user/login',
												data
											}
										).then(
											res => {
												console.log("success:",res.data);
										}).catch(
											err => {
												console.log("error:",err);
											}
										)
										
									},
									
								})
							}
						})
					},
					fail:err=>{
						// console.log(err);
						wx.showToast({
							title:'您已拒绝登录',
							icon:'error',
							duration:2000
						})
					}
				})
				
			},
			loginOut(){
				this.isShow=false;
				//退出后清空缓存
				this.userInfo='';
				this.openId=''
				uni.setStorageSync('user',null);
			},
		}
	}
</script>

<style lang="scss">
.pageMe{
	display: flex;
	flex-direction: column;
	position: relative;
}
.bodyA{
	background-color: #f3f7f7;
	width: 100%;
	height: 1100upx;
	margin-top: 500upx;
	overflow: hidden;
	.setting{
		overflow: hidden;
		margin-top: 350upx;
		width: 100%;
		.setfont{
			margin-left: 10%;
			margin-top: 20upx;
			// position: absolute;
		}
		.settdetail{
			background-color: #ffffff;
			height: 110upx;
			width: 80%;
			margin-left: 10%;
			margin-top: 40upx;
			border-radius: 15upx;
			box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			.settinginfo{
				position: absolute;
				margin-top: 30upx;
				margin-left: 120upx;
			}
			.iconset{
				width: 80upx;
				height: 80upx;
				border-radius: 15upx;
				background-color: #53C21D;
				position: absolute;
				margin-top: 15upx;
				margin-left: 8upx;
			}
		}
	}
}
.avatar{
	width: 250upx;
	height: 250upx;
	background-color: #f0fbff;
	border-radius: 40%;
	margin-left: 30%;
	margin-top: 50upx;
	#ava{
		width: 200upx;
		height: 200upx;
		margin-left: 10%;
		margin-top: 9%;
		border-radius: 40%;
	}
	#aline{
		margin-top: 50upx;
		width: 300upx;
		height: 1upx;
		border-top: 1upx solid rgb(254,21,21);
		margin-left: -25upx;
	}
	#alineA{
		margin-top: 30upx;
		width: 50upx;
		height: 1upx;
		border-top: 1upx solid rgb(254,21,21);
		margin-left: 40%;
	}
}
.head{
	background-color: #53C21D;
	width: 100%;
	height: 500upx;
	font-family:"Hiragino Sans GB","PingFang SC";
	font-weight: 800;
	.introA{
		color: #ffffff;
		font-size: 50upx;
		margin-left: 50upx;
		margin-top: 180upx;
		position: absolute;
		word-spacing: length(2upx);
	}
	#loginOut{
		color: #ffffff;
		font-size: 30upx;
		margin-left: 80%;
		margin-top: 20upx;
		position: absolute;
		word-spacing: length(2upx);
	}
	.avabg{
		position: absolute;
		width: 90%;
		height: 550upx;
		margin-top: 250upx;
		background-color: #EeeeeF;
		margin-left: 5%;
		border-radius: 15upx;
		border:1upx solid lightgray;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		.personinfo{
			margin-top: 50upx;
			text-align: center;
			width: 100%;
			height: 35%;
			// background-color: #2979FF;
			#name{
				
			}
			#email{
				
			}
			.loginA{
				position: absolute;
				// background-color: #000000;
				width: 36%;
				height: 20%;
				margin-top: 5%;
				margin-left: 30.6%;
				border-radius: 15upx;
				color: #ffffff;
				line-height:260%;
				font-size: 40upx;
				border-width: 1px;
				border-style: solid;
				background-color: #000000;
			}
			
		}
	}
}

</style>
